<!DOCTYPE html>
<html>

<head>
  <% include global/meta.html %>
    <% include global/top-css.html %>
      <title>yuscms</title>
</head>

<body>

    <main class="main" data-info="<%=admin.permission%>">
      <div class="ys-admin-pos c-a1a3aa">
        首页
        <span class="f-sum">></span>
        <span class="c-565b6d">在线委托</span>
      </div>
      <div class="ys-admin-tablist">
        <div class="ys-admin-tab-header row justify-content-b">
          <p class="f-14 c-565b6d pl-8 pt-6">在线委托</p>
          
        </div>

        <div class="mr-10 ml-10" v-loading="loading">
          <table class="table table-hover ml-10">
            <thead class="table-th">
              <tr>
                <th></th>
                <th>编号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>地址</th>
                <th>小区</th>
                <th>其它</th>
                <th></th>
              </tr>
            </thead>

            <tbody class="table-border">
              <tr v-for="item in list" :key="item.id">
                <td>
                  <input type="checkbox" :value="item.id" v-model="checkbox" class="checkbox">
                </td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.tel}}</td>
                <td>{{item.addr}}</td>
                <td>{{item.xiaoqu}}</td>
                <td>{{item.other}}</td>
                <td>
                  <a href="javascript:;" @click="del(item.id)">
                    <i class="ico ico-del pos-r t-4"></i>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>

          <div class="row justify-content-b">
            <span class="mt-15 mb-35 c-3b4364" v-if="list.length>0">{{checkbox}}
              <input type="checkbox" v-model="checked" @click="checkedAll" class="checkbox ml-17 mr-15 c-3b4364">
              <el-button type="text" @click="confirm">批量删除</el-button>
            </span>
            <div v-else class="f-14 flex text-c mt-20 c-a1a3aa"> 暂无内容</div>
            <div id="page" class="mt-15 row mr-25">
            </div>
          </div>
        </div>
      </div>
    </main>
      
  <% include global/all-js.html %>
    <script>
      var vm = new Vue({
        el: '.main',
        data: {
          loading: true,
          totalCounts: 0,
          pageNo: $m.getParams('page') || 1,
          totalPage: 0,
          list: [], //渲染页面的列表数据
          checked: false, //全选
          checkbox: [], //选择的数据

        },
        methods: {

          totalCount() {
            var _this = this;
            //获取所有数量
            axios
              .get("/api/admin/ly/count")
              .then(data => {
                let filterData = data.data;
                if (filterData.success) {
                  _this.totalCounts = filterData.data[0].count;
                  _this.queryly();
                }
              })
              .catch(error => {
                console.log(error);
              });
          },

          queryly() {
            var _this = this;
            //获取所有数量
            axios
              .get("/api/admin/ly/query", {
                params: {
                  pageNo: _this.pageNo,
                  count: _this.totalCounts
                }
              })
              .then(data => {
                let filterData = data.data;
                if (filterData.success) {
                  //清空数据
                  _this.list.splice(0);
                  _this.checked = false;
                  _this.checkbox = [];

                  _this.list = filterData.data;
                  _this.totalPage = filterData.totalPage;

                  _this.page();
                  _this.loading = false;
                }
              })
              .catch(error => {
                console.log(error);
              });
          },

          page: function () {
            var _this = this;
            if (_this.pageNo <= 0) {
              _this.pageNo = 1;
            }
            if (_this.pageNo > _this.totalPage) {
              _this.pageNo = _this.totalPage;
            }
            document.querySelector("#page").innerHTML = "";
            Page({
              num: parseInt(_this.totalPage), //页码数
              startnum: _this.pageNo, //指定页码
              elem: $("#page"), //指定的元素
              callback: function (n) {
                //回调函数
                _this.pageNo = n;
                location.hash = "/ly?page=" + n;
                _this.queryly();
              }
            });
          },

          del(id) {
            let _this = this;
            if (!hasPermission("6")) {
              tipsWarn(_this, "对不起,您没有操作权限^_^");
              return;
            }
            axios
              .post("/api/admin/ly/del", {
                id: id
              })
              .then(data => {
                let filterData = data.data;
                if (filterData.success && filterData.data.affectedRows >= 1) {
                  tips(_this, "删除成功！");
                  //清空全选
                  _this.checked = false;
                  _this.checkbox = [];

                  _this.queryly();
                }
              })
              .catch(error => {
                console.log(error);
              });
          },
          checkedAll: function () {
            var _this = this;
            if (this.checked) {
              _this.checkbox = [];

            } else {
              _this.checkbox = [];

              _this.list.forEach(function (item) {
                _this.checkbox.push(item.id);

              });
            }
          },

          confirm() {
            let _this = this;

            if (_this.checkbox.length == 0) {
              tipsWarn(_this, "未选择任何数据！");
              return;
            }

            this.$confirm("确定删除选择该文件, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                _this.del(_this.checkbox);
              })
              .catch(() => {
                tipsInfo(_this, "已取消删除！");
              });
          }
        },

        computed: {},

        watch: {
          checkbox: {
            handler: function (val, oldval) {
              if (this.checkbox.length === this.list.length) {
                this.checked = true;
              } else {
                this.checked = false;
              }

            },
            deep: true
          },
          list: {

            handler: function (val, oldval) {
              console.log(val, oldval);
            },
            deep: true
          }
        },
        created: function () {
          this.totalCount();
        },
        mounted: function () { }
      });
    </script>
</body>

</html>